<template>
  <el-menu
    :default-active="$route.path"
    class="menu-container"
    background-color="#304156"
    text-color="#fff"
    active-text-color="#409eff"
    unique-opened
    router
    :collapse="collapse"
  >
    <el-menu-item index="/index">
      <i class="iconfont homepage" :class="{'is_active': $route.path == '/index'}"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-submenu :index="index" v-for="(menu, index) in menus" :key="index">
      <template v-if="!menu.hidden">
        <template slot="title">
          <i :class="['iconfont', menu.icon]"></i>
          <span>{{ menu.title }}</span>
        </template>
        <template v-for="(submenu, idx) in menu.children">
          <el-menu-item
            v-if="!submenu.hidden"
            :index="'/' + menu.name + '/' + submenu.name"
            :key="idx"
            ><i :class="['iconfont', submenu.icon, $route.path === '/' + menu.name + '/' + submenu.name? 'is_active': '']"></i>{{ submenu.title }}</el-menu-item
          >
        </template>
      </template>
    </el-submenu>
  </el-menu>
</template>

<script>

export default {
  data() {
    return {
      menus: []
    };
  },
  computed: {
    collapse() {
      return this.$store.state.user.collapse;
    }
  },
  created() {
    this.menus = this.$store.getters.menus
  },
};
</script>

<style lang="less" scoped>
.menu-container {
  position: absolute;
  top: 70px;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  &:not(.el-menu--collapse) {
    width: 250px;
  }
  &::-webkit-scrollbar{
    width: 0;
  }
}

</style>